<template>
    <div class="figure-table"  v-loading="loading" element-loading-text="数据加载中">
        <h3 v-if="!isEmpty" >数据信息</h3>

        <div v-if="!isEmpty" class="page1">

            <!-- 行业 -->
            <div class="figure">
                <item-layout title="近3年行业项目总额分析">
                    <project-amount :options="industryAmountObj" :isZoom="true" :isSlide="true" unitType='amout'></project-amount>
                </item-layout>
                <item-layout title="近3年行业项目数量分析">
                    <project-amount :options="industryNumObj" :isZoom="true" :isSlide="true" unitType='num'></project-amount>
                </item-layout>
            </div>

            <select-module 
                ref="major" 
                label="点击查看各行业近三年分析" 
                stype="industry" 
                :options="majorList" 
                :keyName="`valueid`" 
                :contentName="`valuename`"
                v-model="industryActive" 
                theme="data-export"
                @click="majorAfterQuery"
            ></select-module>

            <!-- 区域 -->
            <div class="figure">
                <item-layout title="近3年区域项目总额分析">
                    <project-amount :options="areaAmountObj" unitType='amout'></project-amount>
                </item-layout>
                <item-layout title="近3年区域项目数量分析">
                    <project-amount :options="areaNumObj" unitType='num'></project-amount>
                </item-layout>
            </div>

            <select-module 
                class="areaClass" 
                ref="city" 
                stype="city" 
                label="点击查看各区域近三年分析" 
                :options="cities" 
                :keyName="`valueid`" 
                :contentName="`valuename`"
                v-model="areaActive" 
                theme="data-export"
                @click="areaAfterQuery"
            ></select-module>

            <!-- 列表 -->
            <div class="table">
                <div>
                    <loop-table title="招标排行榜" 
                    :proPgdata="proNumListPgdata" 
                    :action="`${$store.state.api.ecUrl}/echarts/gettender.json`" 
                    ref="loopTable"
                    @clickHandler="openHandler"
                    >
                        <div class="table-search">
                            <el-radio-group v-model="proNumListPgdata.sortname" size="mini" class="re-radio" @change="clickTable">
                                <el-radio-button label="winbidamount"><span style="font-size:14px;">金额</span></el-radio-button>
                                <el-radio-button label="winbidnum"><span style="font-size:14px;">次数</span></el-radio-button>
                            </el-radio-group>
                        </div>
                    </loop-table>
                </div>
            </div>

        </div>

        <template
        v-if="isEmpty" 
        >
            <emptyItem 
                :typeName="typeName" 
                :num="num" 
                :unit="'次'" 
                dateTip="使用后，该数据报告可一小时内任意查看。" 
                @buy="$emit('buy')" 
                @close="$emit('close')" 
                :isNeedBuy="isNeedBuy" 
                @look="look"
            ></emptyItem>

            <div class="export-footer">
                <img :src="img" alt="">
            </div>
        </template>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import dialogWaitList from '@js/dialog-wait-list.js';

import itemLayout from './components/item-layout.vue';
import projectAmount from './charts/project-amount.vue';
import selectModule from '@/pages/application/info/components/select-module.vue';
import loopTable from './components/loop-table.vue';
import emptyItem from '../components/emptyItem.vue';

export default {
    name: '',
    components: { itemLayout, projectAmount, selectModule, loopTable ,emptyItem },
    props:{
        typeName: {
            type: String,
            default: ""
        },
        num: {
            type: [String, Number],
            default: 0
        },
        unit:{
            type: String,
            default: "条"
        },
    },
    data() {
        return {
            industryAmountObj: {}, //行业 金额
            industryNumObj: {}, //行业 项目
            areaAmountObj: {}, //区域 金额
            areaNumObj: {}, //区域 项目
            proAmountList: [],
            proNumList: [],
            proNumListPgdata: {
                pageindex: 1,
                pagesize: 10,
                time: '',
                cityid: '',
                hycode: '',
                sortname: 'winbidamount',
            },
            proAmountPgdata: {
                pageindex: 1,
                pagesize: 10,
                time: '',
                cityid: '',
                hycode: '',
            },
            majorList: [],

            //行业 和 区域
            industryActive: [],
            areaActive: [],

            img: '/images/tool/shili.png',
            loading: true,
            isEmpty: true,
            isHavingPower: false,
            isNeedBuy: true,   // 是否需要购买次数
            useTimer: null,
        };
    },
    computed: {
        cities() {
            return this.$store.getters['city/getCitiesByProvinceCode']('130000');
        },
    },
    watch: {
        isHavingPower:{
            handler(n,o){
                if(n){
                    try{
                        clearInterval(this.useTimer);
                    }catch(e) {}
                }
            },
            deep:true,
        },
    },
    methods: {
        ...mapActions({
            queryCity: 'city/queryCities',
        }),
        /**
         * 获取次数
         * @param {Boolean} whenNoNumShowDialog 没次数时弹框提示购买
         * @param {Boolean} showDialogLead 弹出使用引导
         */
        getNums(whenNoNumShowDialog = true, showDialogLead = false){
            this.loading = true;

            this.$store.dispatch('userinfo/userPowerLook', {
                typeName:'数据统计',
                userData:{
                    productcode:"SJTJ"
                },
                noLogin: () => {
                    this.loading = false;
                },
                cb: (data) => {
                    // 请求完毕
                    this.isHavingPower = data.ispermission;
                    
                    this.loading = false;
                },
                havePower: () => {
                    // 有权限
                    this.isEmpty = false;

                    this.doMouthed();

                    try{
                        clearInterval(this.useTimer);
                    }catch(e) {}
                },
                noNums: () => {
                    // 没权限，无剩余数量
                    this.isEmpty = true;
                    this.isNeedBuy =  true;

                    if(isShow == 'show'){
                        this.$emit('buy');
                    }
                },
                haveNums: () => {
                    // 没权限，有剩余数量
                    this.isEmpty = true;
                    this.isNeedBuy =  false;

                    if (!showDialogLead) {
                        return;
                    }

                    // 在列队中注册-分享引导登录
                    dialogWaitList.push(() => {
                        // 提示直接使用次数
                        this.$confirm(`您有${this.num}次查看数据统计的次数，此操作只消耗一次`, '提示', {
                            confirmButtonText: '直接使用',
                            cancelButtonText: '取消',
                            type: 'success',
                        }).then(() => {
                            this.look();

                            dialogWaitList.next();
                        }).catch(() => {
                            dialogWaitList.next();
                        });
                    }, 4);

                    
                },
                whenNoNumShowDialog: whenNoNumShowDialog,
            });
        },

        //消耗次数 查看
        look() {

            if (this.num > 0) {
                // 有剩余数量
                this.$store.dispatch('userinfo/userUsedNums', {
                    userData:{
                        productcode:"SJTJ"
                    },
                    success:() => {
                        this.$emit('close');

                        //轮询
                        try{
                            clearInterval(this.useTimer);
                        }catch(e) {}

                        this.useTimer = setInterval(()=>{
                            this.getNums();
                        }, 1000);
                    },
                });
            } else {
                // 没有剩余数量
                this.$alert('数据统计 查看 0 条，请购买次数后查看', {
                    confirmButtonText: '确定',
                    callback: (action) => { },
                });
            }
        },

        doMouthed(){
            this.getIndustryAmount();
            this.getArea();
            this.getMajorList();
        },

        majorAfterQuery(item, index) {
            this.setCzc(['数据报表', '点击按钮' , '地市', index ,'dataExport-btn-city']);

            this.clickHandle(item);
        },
        areaAfterQuery(item, index) {
            this.setCzc(['数据报表', '行业' , '地市', index ,'dataExport-btn-area']);

            this.clickHandle(item);
        },
        // 行业 项目总额 项目数量
        getIndustryAmount() {
            let that = this;
            let data = {
                timeType: '', // year , mon , quarter 季度
                cityType: '', //地区编码
                hyType: '', //行业编码
            };
            that.$get(`${that.$store.state.api.ecUrl}/echarts/getallhy.json`, data, (data) => {
                // 数据 amountValue 金额    numValue 数量
                that.industryAmountObj = clone(data);
                that.industryAmountObj.seriesValue = that.industryAmountObj.amountValue;
                that.industryNumObj = clone(data);
                that.industryNumObj.seriesValue = that.industryNumObj.numValue;

                delete that.industryAmountObj.numValue;
                delete that.industryNumObj.amountValue;
            });
        },

        //区域 项目数量
        getArea() {
            let that = this;
            let data = {
                timeType: '', // year , mon , quarter 季度
                cityType: '', //地区编码
                hyType: '', //行业编码
            };
            that.$get(`${that.$store.state.api.ecUrl}/echarts/getallcity.json`, data, (data) => {
                // 数据 amountValue 金额    numValue 数量
                that.areaAmountObj = clone(data);
                that.areaAmountObj.seriesValue = that.areaAmountObj.amountValue;
                that.areaNumObj = clone(data);
                that.areaNumObj.seriesValue = that.areaNumObj.numValue;

                delete that.areaAmountObj.numValue;
                delete that.areaNumObj.amountValue;
            });
        },

        //专业
        getMajorList() {
            this.$get(`${this.$store.state.api.tbUrl}/searchrelated/getindustries.json`, {}, (data, res) => {
                this.majorList = data;
            });
        },

        clickHandle(val) {
            let targetPath = '/tools/data-export/figure-table/details',
                query;

            if (val.typecode == 'industry') {
                query = toSearch({
                    mon: 'year',
                    area: '',
                    industry: val.valueid,
                    setting_no_nav: this.getQuery('setting_no_nav'),
                });
            } else {
                query = toSearch({
                    mon: 'year',
                    area: val.valueid,
                    industry: '',
                    setting_no_nav: this.getQuery('setting_no_nav'),
                });
            }

            targetPath = targetPath + query;
            
            window.open(targetPath, '_blank');
        },

        // 查看具体分析
        openHandler(val) {
            let search = toSearch({
                    guid: val.guid,
                    company: val.name,
                    setting_no_nav: this.getQuery('setting_no_nav'),
                }),
                targetPath = `/portraits${search}`;
            
            window.open(targetPath, '_blank');
        },

        //下边表格 ，点击切换。
        clickTable() {
            this.$refs.loopTable.clickTable();
        },
    },
    mounted() {
        this.getNums(false, true);

        this.queryCity();
    },
    beforeDestroy(){
        try{
            clearInterval(this.useTimer);
        }catch(e) {}
    },
};
</script>

<style scoped lang="scss">
.figure-table {
    & > h3 {
        margin-top: 10px;
    }
    .page1 {
        .figure {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 30px 0 10px;

            & > div {
                width: 560px;
            }
        }
        .areaClass {
            margin: -40px 0 30px;
        }
        .table {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            & > div {
                width: 100%;
            }
        }
    }

    .export-footer {
        img {
            width: 99%;
            margin-top: 15px;
        }
    }

    ::v-deep .el-loading-spinner {
        top: 150px;
        margin-top: -21px;
        width: 100%;
        text-align: center;
        position: absolute;
    }
}
</style>
